<<<<<<< HEAD
<template>
    <div>
        <!--<div v-if="repaire_data.length == 0 || ">-->
            <!--<van-cell-group  title="当前暂无维修订单...">-->
            <!--</van-cell-group>-->
        <!--</div>-->
        <van-tabs v-model="active">
            <van-tab title="未维修">
                <div class="wuyeRepaire" v-if="data.repaire_status == 0" v-for="data in newrePaire_data">
                    <div class="repaire-list1">
                        <van-tag mark type="danger">未维修</van-tag><span>维修单编号：{{data.repaire_id}}</span>
                    </div>
                    <van-notify v-model="show1" type="success">
                        <van-icon name="success" style="margin-right: 4px;" />
                        <span>您已成功接单</span>
                    </van-notify>
                    <van-cell center :title="data.u_id" :value="data.address" :label="data.lable" />
                    <van-button type="primary" :disabled="data.repaire_status == 2" @click="acceptRepaire(data.repaire_id)" size="mini">接单</van-button>
                    <van-button type="primary" v-show="data.repaire_status == 2" @click="finishRepaire(data.repaire_id)" size="mini">维修完成</van-button>
                    <van-dialog  v-model="show" @confirm="confirm" title="标题" show-cancel-button>
                        确定要接单嘛？
                    </van-dialog>
                    <van-loading v-if="isLoadingShow" size="24px">提交中...</van-loading>
                    <van-divider
                            :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
                    >
                    </van-divider>
                </div>
            </van-tab>
            <van-tab title="正在维修">
                <div class="wuyeRepaire" v-if="data.repaire_status == 2" v-for="data in newrePaire_data">
                    <div class="repaire-list1">
                        <van-tag mark :type="data.repaire_status == 0 ? 'danger' : 'warning'">{{data.repaire_status == 0 ? '未维修' : '正在维修'}}</van-tag><span>维修单编号：{{data.repaire_id}}</span>
                    </div>
                    <van-notify v-model="show1" type="success">
                        <van-icon name="success" style="margin-right: 4px;" />
                        <span>您已成功接单</span>
                    </van-notify>
                    <van-cell center :title="data.u_id" :value="data.address" :label="data.lable" />
                    <van-button type="primary" :disabled="data.repaire_status == 2" @click="acceptRepaire(data.repaire_id)" size="mini">接单</van-button>
                    <van-button type="primary" v-show="data.repaire_status == 2" @click="finishRepaire(data.repaire_id)" size="mini">维修完成</van-button>
                    <van-dialog v-model="show" @confirm="confirm" title="系统提示" show-cancel-button>
                        确定要接单嘛？
                    </van-dialog>
                    <van-loading v-if="isLoadingShow" size="24px">提交中...</van-loading>
                    <van-divider
                            :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
                    >
                    </van-divider>
                </div>
            </van-tab>
            <van-tab title="已维修">
                <div class="wuyeRepaire" v-if="data.repaire_status == 1" v-for="data in newrePaire_data">
                    <div class="repaire-list1">
                        <van-tag mark type="success">已维修</van-tag><span>维修单编号：{{data.repaire_id}}</span>
                    </div>
                    <van-notify v-model="show1" type="success">
                        <van-icon name="success" style="margin-right: 4px;" />
                        <span>您已成功接单</span>
                    </van-notify>
                    <van-cell center :title="data.u_id" :value="data.address" :label="data.lable" />
                    <!--<van-button type="primary" :disabled="data.repaire_status == 2" @click="acceptRepaire(data.repaire_id)" size="mini">接单</van-button>-->
                    <!--<van-button type="primary" v-show="data.repaire_status == 2" @click="finishRepaire(data.repaire_id)" size="mini">维修完成</van-button>-->
                    <van-dialog  v-model="show" @confirm="confirm" title="标题" show-cancel-button>
                        确定要接单嘛？
                    </van-dialog>
                    <van-loading v-if="isLoadingShow" size="24px">提交中...</van-loading>
                    <van-divider
                            :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
                    >
                    </van-divider>
                </div>
            </van-tab>
        </van-tabs>
        <div v-for="data in newrePaire_data" :key="data.repaire_id">

        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import { Toast } from 'vant';
    Vue.use(Toast);
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    //例如：import 《组件名称》 from '《组件路径》';
    export default {
        //import引入的组件需要注入到对象中才能使用
        components: {},
        data() {
            //这里存放数据
            return {
                activeNames: ["1"],
                repaire_data: [],
                newrePaire_data:[],
                u_id: '',
                repaire_id:0,
                length: 0,
                show: false,
                show1:false,
                isLoadingShow:false
            };
        },
        //监听属性 类似于data概念
        computed: {},
        //监控data中的数据变化
        watch: {},
        //方法集合
        methods: {
            getDataList() {
                //获取维修数据
                let data = JSON.parse(localStorage.getItem("login_data"));
                console.log("用户id：" + data.u_id);
                this.u_id = data.u_id;
                axios.get("safty/repaire/queryRepaireVOByUId", {
                    params: {
                        u_id: this.u_id
                    }
                })
                    .then(res => {
                        if (res.success) {
                            console.log(res.data)
                            this.repaire_data = res.data;
                            let address;
                            let lable;
                            let data = {};
                            for(let i = 0;i<this.repaire_data.length;i++){
                                data.repaire_id = this.repaire_data[i].repaire_id;
                                console.log(this.repaire_data[i].repaire_id);
                                data.repaire_status = this.repaire_data[i].repaire_status;
                                data.u_id = this.repaire_data[i].u_id;
                                address = "地址:"+this.repaire_data[i].addRess;
                                data.address = address;
                                lable = "故障类别: " + this.repaire_data[i].type_name + "\n\n\n故障描述: "+this.repaire_data[i].repaire_desc;
                                data.lable = lable;
                                this.newrePaire_data.push(data);
                                data = {};
                            }
                            this.length = this.repaire_data.length;
                            console.log(this.newrePaire_data);
                        } else {
                        }
                    })
                    .catch(err => {

                    })
            },
            acceptRepaire(id){
                this.repaire_id = id;
                this.show = true;
            },
            finishRepaire(id){
                console.log(id);
                this.repaire_id=id;
                axios.put("safty/repaire/finishRepaire/"+this.repaire_id)
                    .then(res=>{
                        if(res.success){
                            this.isLoadingShow = true;
                            Toast.success('维修完成，已成功提交');
                        }
                        setTimeout(()=>{
                            this.isLoadingShow = false;
                            this.$router.go(0);
                        },500)
                    })
                    .catch(err=>{
                        Toast.fail('提交失败');
                    })
            },
            confirm(){
            //    接单成功后修改repaire_status = 2;
                console.log("当前id: " + this.repaire_id);
                axios.put("safty/repaire/updateRepaireStatusById/"+this.repaire_id)
                    .then(res=>{
                        if(res.success){
                            this.showNotify();
                        }
                        setTimeout(()=>{
                            this.$router.go(0);
                        },500)
                    })
                    .catch(err=>{

                    })
            },
            //成功通知
            showNotify() {
                this.show1 = true;
                setTimeout(() => {
                    this.show1 = false;
                }, 2000);
            },
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {
        },
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            this.getDataList();
        },
        beforeCreate() {
        }, //生命周期 - 创建之前
        beforeMount() {
        }, //生命周期 - 挂载之前
        beforeUpdate() {
        }, //生命周期 - 更新之前
        updated() {
        }, //生命周期 - 更新之后
        beforeDestroy() {
        }, //生命周期 - 销毁之前
            destroyed() {
        }, //生命周期 - 销毁完成
        activated() {
        } //如果页面有keep-alive缓存功能，这个函数会触发
    };
</script>
<style>
.wuyeRepaire {
     /*margin-top: 10px;*/
     /*margin-bottom: 20px;*/
}
.repaire-list1{
    display: flex;
    justify-content: space-between;
    margin-right: 20px;
    margin-left: 20px;
    /*margin-bottom: 10px;*/
    margin-top: 10px;
=======

<template>
  <div class>
    <div class="repaire-list">
      <van-collapse v-model="activeNames">
        <van-collapse-item name="1">
          <template #title>
            <div>
              <van-tag round type="danger">未维修</van-tag>维修订单1
            </div>
          </template>
          <div>
            <van-swipe-cell>
              <template #left>
                <van-button square type="primary" text="维修" />
              </template>
              <van-cell :border="false" :title="repaire_data[0].user_name" :value="repaire_data[0].address" />
              <template #right>
                <van-button square type="danger" text="删除" />
                <van-button square type="primary" text="收藏" />
              </template>
            </van-swipe-cell>
          </div>
        </van-collapse-item>
      </van-collapse>
      <van-collapse v-model="activeNames">
        <van-collapse-item name="2">
          <template #title>
            <div>
              <van-tag round type="warning">正在维修</van-tag>维修订单2
            </div>
          </template>
          <div>
            <van-swipe-cell>
              <template #left>
                <van-button square type="primary" text="维修" />
              </template>
              <van-cell :border="false" :title="repaire_data[0].user_name" :value="repaire_data[0].address" />
              <template #right>
                <van-button square type="danger" text="删除" />
                <van-button square type="primary" text="收藏" />
              </template>
            </van-swipe-cell>
          </div>
        </van-collapse-item>
      </van-collapse>
      <van-collapse v-model="activeNames">
        <van-collapse-item name="3">
          <template #title>
            <div>
              <van-tag round type="success">已维修</van-tag>维修订单2
            </div>
          </template>
          <div>
            <van-swipe-cell>
              <template #left>
                <van-button square type="primary" text="维修" @click="select1"/>
              </template>
              <van-cell :border="false" :title="repaire_data[0].user_name" :value="repaire_data[0].address" />
              <template #right>
                <van-button square type="danger" text="删除" @click="delete1"/>
                <van-button square type="primary" text="收藏" />
              </template>
            </van-swipe-cell>
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      activeNames: ["1"],
      repaire_data: [
        {
          user_name: "张三",
          user_phone: "123456789",
          address: "三号楼三单元301室"
        }
      ]
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
      select1(){
          console.log("111");
      },
    delete1(){
        console.log("接单");
    },

  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style>
.repaire-list {
  border: 1px solid red;
>>>>>>> 70f7e19d6da4b30f0412d394b1171a015e63af36
}
</style>